<template>
	<div class="loginbg">
		<div class="loginFrm">
			<el-form :model="user" label-width="70px" width="420px" :rules="formRules" class="demo-ruleForm">
				<div align="center">
				  <h1 style="font-size: 30px; color: #cf9236;">	登录</h1>
				  <h5 style="color: #80848c">
					欢迎登录宿舍管理系统
				  </h5>
				</div>				
				<el-form-item label="用户名" prop="username" style="width:95%">
				  <el-input v-model="user.username" />
				</el-form-item>
				<el-form-item label="密码" prop="pwd" style="width:95%">
				  <el-input v-model="user.pwd" show-password/>
				</el-form-item>				
				 <el-button @click="login" type="warning" plain style="width:90%; ">登 录</el-button>
				
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import{ ref, reactive, getCurrentInstance} from 'vue'
	import{ useRouter } from 'vue-router'
	let { proxy } = getCurrentInstance();
	let user=ref({username:'',pwd:''})
	const router=useRouter()	
	function login(){
		proxy.$http.get('/login.ctl?username='+user.value.username+'&password='+user.value.pwd)
		.then(res => {
			if(res.data.code==200){
				window.sessionStorage.setItem('loginUser',user.value.username)				
				let menu_data=[]  //后台获取当前用户拥有的菜单结构构造数组
				res.data.permissions.forEach((item)=>{
					let obj={}
					obj.menu_name=item.description
					obj.path=item.url.slice(1,item.url.length);
					obj.menu_icon="refresh"
					//正常的菜单应该有子菜单，应加入children属性	
					//obj.menu_show_status=1 //是否显示
					//obj.menu_visit_status=1	//是否可以访问	
					menu_data.push(obj)
				})
				sessionStorage.setItem("menu_data", JSON.stringify(menu_data)); //储存菜单信息，用于生成框架内左侧菜单信息)
				router.push('/home')	
			}
			else
				alert("用户名或密码错误")			
		})
		.catch(err => {
			console.log(err)
		});
		
	}	
	const formRules = reactive({
		username: [
		 {required: true, message: '请输入用户名', trigger: 'blur'}, //非空校验
		 {min: 2, max: 10, message: '用户名长度应为2至10个字符', trigger: 'blur'},  //长度校验
		],		
		pwd: [
		  {required: true, message: '请输入密码', trigger: 'blur'},
		  {min: 2, max: 10, message: '密码长度应为2至10个字符', trigger: 'blur'}
		],		
	})
</script>

<style>
	.loginbg{
		width:100%;	height:100%;
		background-size:100%;
		display:flex;
	}
	.loginFrm{
		width:500px;
		height:320px;
		background: rgba(255,255,255,0.8);
		border-radius:5px;
		margin:auto;
		padding-top:20px;	
		font-weight: bold;
	}
</style>
